{extend name='public/base' /}

{block name="content"}
<style>
     html{
		 background-color: #fff !important;
	 }
    .uni-card {
        /* #ifndef APP-NVUE */
        display: flex;
        flex: 1;
        box-shadow: 0 0 0 rgb(0, 0, 0);
        /* #endif */
        margin: 12px 0;
        background-color: #ffffff;
        position: relative;
        flex-direction: column;
        overflow: hidden;
        /* #ifdef H5 */
        cursor: pointer;
        /* #endif */
        min-width: 100%;
        width: 100%;
	   border-radius: 5px;
    }

    .replyList {
        padding: 6px;

    }

    .replyDetails{
        font-size: 12px;
        margin-left: 40px;
    }

    .replyTitle {
        /* height: 30px; */
        font-size: 12px;
    }

    .replyTitle img {
        width: 30px;
        height: 30px;
        margin-bottom: -8px;
		display: none;
    }

    .replyTitle span {
        display: inline-block;
        line-height: 30px;
        height: 30px;
        margin-left: 10px;
    }

    .uni-border {
        position: relative;
        /* #ifdef APP-NVUE */
        /* #endif */
        z-index: 1;
    }

    /* #ifndef APP-NVUE */
    .uni-border:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        border-radius:0px;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
        z-index: -1;
    }

    /* #endif */


    .uni-border-bottom {
        position: relative;
        /* #ifdef APP-NVUE */
        border-bottom-color: #d3d3d3;
        border-bottom-style: solid;
        border-bottom-width: 0.5px;
        /* #endif */
        z-index: 1;
    }

    /* #ifndef APP-NVUE */
    .uni-border-bottom:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        border-bottom: 1px solid #d3d3d3;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
        z-index: -1;
    }

    /* #endif */
    .uni-border-top {
        position: relative;
        /* #ifdef APP-NVUE */
        /* #endif */
        z-index: 1;
    }

    /* #ifndef APP-NVUE */
    .uni-border-top:after {
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
        z-index: -1;

    }

    /* #endif */

    .uni-card__thumbnailimg {
        position: relative;
        flex-direction: column;
        justify-content: center;
        height: 150px;
        overflow: hidden;
    }

    .uni-card__thumbnailimg-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        overflow: hidden;
    }

    .uni-card__thumbnailimg-img {
        flex: 1;
    }

    .uni-card__thumbnailimg-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        padding: 10px 10px;
        background-color: #ffffff;
    }

    .uni-card__thumbnailimg-title-text {
        flex: 1;
        font-size: 12px;
        color: #fff;
    }

    .uni-card__title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        padding: 10px;

    }

    .uni-card__title-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        align-items: center;
        overflow: hidden;
    }

    .uni-card__title-header {
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 5px;
    }

    .uni-card__title-header-img {
        width: 40px;
        height: 40px;
    }

    .uni-card__title-content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        flex: 1;
        padding-left: 10px;
        height: 40px;
        /* overflow: hidden; */
    }

    .uni-card__title-content-title {
        font-size: 12px;
        line-height: 40px;
        height: 80px;
    }

    .uni-card__title-content-extra {
        font-size: 12px;
        line-height: 27px;
        color: #ffffff;
    }

    .uni-card__header {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        position: relative;
        flex-direction: row;
        padding: 10px;
        align-items: center;
    }

    .uni-card__header-extra-span{
        font-size: 14px;
    }

    .uni-card__header-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        margin-right: 10px;
        justify-content: flex-start;
        align-items: center;
    }

    .uni-card__header-title-text {
        font-size: 12px;
        flex: 1;
        color: #333;
    }
    .uni-card__header-extra-img {
        height: 40px;
        width: 40px;
        margin-right: 10px;
    }
    .uni-card__header-extra-text {
        flex: 1;
        margin-left: 10px;
        font-size: 12px;
        text-align: right;
        color: #ffffff;
    }

    .uni-card__content {
        color: #ffffff;
    }

    .uni-card__content--pd {
        padding: 10px;
    }

    .uni-card__content-extra {
        font-size: 12px;
        padding-bottom: 10px;
        color: #ffffff;
    }

    .uni-card__footer {
        justify-content: space-between;

        padding: 10px;
    }

    .uni-card__footer input {
        border: 1px solid rgb(153, 153, 153);
        width: 95%;
        height: 19px;
        padding: 0 2px;
        display: inline-block;
    }

    .uni-card__footer-text {
        color: #ffffff;
        font-size: 12px;
        float: right;
        background-color: #2d8cf0;
        padding: 3px;
        border-radius: 3px;
    }

    .uni-card__footer-text:active {
        color: #e7e7e7;
        font-size: 12px;
        float: right;
        background-color: #0c007c;
        padding: 3px;
        border-radius: 3px;
    }
   .banjie{
	     color: #ffffff;
	     font-size: 14px;
	     background-color: #2d8cf0;
	     padding: 3px;
		  width: 60px;
		  border-radius: 5px;
		  text-align: center;
		 line-height: 24px;
		 display: inline-block;
		 margin-top: 10px;
   }
    .uni-card--shadow {
        position: relative;
        /* #ifndef APP-NVUE */
        box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
        /* #endif */
    }
    .uni-card--full {
        margin: 0;
        border-radius: 0;
    }

    /* #ifndef APP-NVUE */
    .uni-card--full:after {
        border-radius: 0;
    }

    /* #endif */
    .uni-ellipsis {
        /* #ifndef APP-NVUE */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* #endif */
        /* #ifdef APP-NVUE */
        /* lines: 1; */
        /* #endif */
    }

    .cardWrap {
        width: 100%;
        min-width: 900px;
    }

    .navMenu {
        margin: 0 0 20px 0;
        font-size: 12px;
        color: #989898;
    }

    .navMenu span {
        margin: 0 10px;
    }

    .navTitle {
        /* margin: 0 500px; */
        font-weight: 800;
        font-size: 15px;

        color: #444444;
    }

    .cardTitle{
		    padding: 12px 0 0 10px;
		    line-height: 30px;

	}
    .cardDetail{
	    margin: 10px 0;
	    padding: 0 10px;
		
	}
    .cardimg {
        margin: 10px 0;
        padding: 0 10px;
		border-bottom: 1px solid #d3d3d3;
		
    }

    .cardimg img {
        width: 32%;
        height: 150px;
		margin: 20px 0 20px 0;
    }

    .cardimg img:nth-child(1) {
        margin: 20px 1%;
    }
	.time{
		float: right;
		color: #e0dbdb;
	}
</style>

<div class="layui-col-md12">
    <div class="layui-card">
        <div >
            <div class="uni-card uni-border" class="uni-card--full uni-card--shadow">
                <div class="cardTitle">
                    反馈主题：{$t.title}
                </div>
                <div class="cardDetail">
                    反馈描述：{$t.detail}
                </div>
                {if condition="$t.img"}
                <div class="cardimg">
                    <div class="">
                        图片：
                    </div>
                    <img src="{$t.img}" mode=""></img>
                </div>
                {/if}
                {volist name="$t.back" id="i"}
                <div class="replyList">
                    <div class="replyTitle">
                        {if condition="$i.is_admin == 1"}
                        <span>工作人员：</span>
						<span class="time">{$i.create_time}</span>
                        {else /}
                        <span >用户：</span>
						<span class="time">{$i.create_time}</span>
                        {/if}
                    </div>
                    <div class="replyDetails">
                        {$i.detail}
                    </div>
                </div>
                {/volist}
                {if $t.status==2}
                <div class="replyList" style=" border-top: 1px solid #d3d3d3;">
                    <div class="replyTitle">
                        <span style="color: #f00;">处理结果：</span>
                        <span style="color: #f00;">{$t.result}</span>
                        <span class="time">{$t.update_time}</span>
                    </div>
                </div>
                {/if}
                <!-- 底部 -->
				{if $t.status!=2}
                <div v-if="note" class="uni-card__footer uni-border-top" style="height: 30px;width: 95%; margin: 0 auto;min-width: 630px;">
                    <slot name="footer">
                        <input placeholder="请输入回复消息..." id="detail" style="height: 30px; width: 560px;border-radius: 5px;outline:none;" />
                        <input type="hidden"  id="pid" value="{$t.id}"  />
                        <span class="uni-card__footer-text"  lay-submit="reply" lay-filter="search" style="width: 50px; border-radius: 5px;text-align: center; line-height: 26px;">回复</span>
                    </slot>
                </div>
				 {/if}
                
                {if $t.status!=2}
                <div style="width: 100%; text-align: right;" ><div class="banjie" lay-filter="over" lay-submit="">办结</div></div>
                {/if}

            </div>
        </div>	
    </div>
</div>

{/block}

{block name="js"} <!--js处理区-->
<script>
    layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable'], function () {
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var lucky = layui.lucky;
        var opTable = layui.opTable;
        form.render();
        /**
         * 关键词搜索树
         */
		form.on('submit(over)', function (obj) {
		       var _id  = "{$t.id}"
		       lucky.CreateOpenForm("办结","{:url('end')}?id="+_id,"80%","80%");
		       return false;
			   console.log(_id)
		   });
        form.on('submit(search)', function (obj) {
            var detail = $('#detail').val();
            var pid = $('#pid').val();
            $.ajax({
                url:"{:url('reply')}",
                type:"post",
                data: {'detail':detail,'pid':pid},
                dataType:"json",
                success:function(data){
                    var code = data.code
                    if(code==1){
                        $('#detail').val('');
                        var end  = $("div[class=replyList]:last") ;
                        console.log(end)
                        var html = '' ;
                        html += "<div class='replyList'>"+
                            "<div class='replyTitle'>" +
                            "<span>工作人员</span>" +
                            "</div>" +
                            "<div class='replyDetails'>"+detail+"</div></div>" ;
                        if(end.length>0){
                            end.after(html);
                        }else{
                            $('.cardimg').after(html);
                        }
                    }else{
                        layer.msg(data.msg, {icon: 5, time: 1000});
                    }
                }
            });
        });
    });
</script>
{/block}
